<template>
  <el-row class="card-body" :gutter="20">
    <div>
      <el-button size="mini" icon="el-icon-arrow-left" @click="leftBtn()" :disabled="showLeftBtn"></el-button>
    </div>
    <div style="width:1000px;overflow:hidden;margin-right:20px">
      <div
        style="display: flex;transition:all 0.5s"
        :style="{transform:`translateX(${changeVal}px)`}"
      >
        <div
          v-for="(o,index) in cardsLsit"
          :key="index"
          :style="{'margin-right':( o==cardsLsit.length?'0px':'40px')}"
        >
          <el-card
            :body-style="{ padding: '20px' }"
            shadow="hover"
            @mouseenter.native="enterShow(o)"
            @mouseleave.native="outHide(o)"
            style="position:relative"
          >
            <img src="@/static/test6.jpg" class="image" />
            <div style="padding: 14px">
              <span>好吃的汉堡</span>
              <div class="bottom clearfix">
                <time class="time">{{ currentDate }}</time>
                <el-button type="text" class="button">操作按钮</el-button>
              </div>
            </div>
            <div
              class="upBox"
              :style="{'margin-top':index===current-1?topSide+'px':'20px'}"
            >端坐岁月的窗前，敛一怀暖意入心，任水榭沉香的心事温热了笔尖的寒凉。时光依旧，只斑驳的光影在树下婆娑着，一枚枫红落入心底，圈圈涟漪，是月色下默然收拢的含香心事</div>
          </el-card>
        </div>
      </div>
    </div>
    <div>
      <el-button
        size="mini"
        icon="el-icon-arrow-right"
        @click="rightBtn()"
        :disabled="showRightBtn"
      ></el-button>
    </div>
  </el-row>
</template>

<script>
export default {
  data() {
    return {
      currentDate: new Date(),
      changeVal: 0,
      showLeftBtn: true,
      showRightBtn: false,
      cardsLsit: 5,
      current: 1,
      topSide: 20,
    };
  },
  methods: {
    enterShow(n) {
      this.current = n;
      this.topSide = -308;
    },
    outHide(n) {
      this.current = n;
      this.topSide = 20;
    },
    rightBtn() {
      if (Math.abs(this.changeVal / 340) == this.cardsLsit - 3) {
        this.showRightBtn = true;
        // this.showLeftBtn = false;
      } else {
        this.changeVal -= 340;
        this.showLeftBtn = false;
        this.showRightBtn = false;
      }
    },
    leftBtn() {
      if (this.changeVal != 0) {
        this.changeVal += 340;
        this.showLeftBtn = false;
        this.showRightBtn = false;
      } else {
        this.showLeftBtn = true;
      }
    },
  },
};
</script>
<style>
.card-body {
  padding: 50px 0px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.el-row {
  margin: 0px !important;
}
.el-card {
  width: 300px;
  background: #fff;
  border: 1px solid #eaeefb;
  border-radius: 5px;
  box-sizing: border-box;
  text-align: center;
  position: relative;
  transition: all 0.3s ease-in-out;
  bottom: 0;
}
.el-card:hover {
  /* bottom: 6px; */
  box-shadow: 0 6px 18px 0 rgb(232 237 250 / 50%);
}
.time {
  font-size: 13px;
  color: #999;
}

.bottom {
  margin-top: 13px;
  line-height: 12px;
}
/* 
.button {
  padding: 0;
  float: right;
} */
.upBox {
  width: 100%;
  height: 100%;
  background: #cccccc;
  z-index: 10;
  position: absolute;
  opacity: 0.8;
  padding: 20px;
  transition: all 1s;
  margin-left: -20px;
}
.image {
  width: 100%;
  display: block;
}

.clearfix:before,
.clearfix:after {
  display: table;
  content: "";
}

.clearfix:after {
  clear: both;
}
</style>
